<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-17 13:48:46
 * @LastEditTime: 2019-09-21 12:45:53
 * @LastEditors: Please set LastEditors
 -->

<template>
  <div id="app" style="width:100%;height:100%;">
    <!-- <keep-alive v-if="$route.meta.keepAlive"> -->
        <router-view />
    <!-- </keep-alive> -->
  </div>
</template>

<script>
import VueAudio from './components/VueAudio'
export default {
  name: "App",
  data(){
    return {
      audios: [
        // {
        //   url: 'http://65.ierge.cn/12/186/372266.mp3',
        //   controlList: 'onlyOnePlaying'
        // },
        // {
        //   url: 'http://65.ierge.cn/12/186/372266.mp3',
        //   controlList: 'noDownload noMuted onlyOnePlaying'
        // }, {
        //   url: 'http://65.ierge.cn/12/186/372266.mp3',
        //   controlList: 'noDownload noVolume noMuted onlyOnePlaying'
        // }, 
        {
          url: 'http://65.ierge.cn/12/186/372266.mp3',
          controlList: 'noDownload noSpeed onlyOnePlaying'
        }
      ]
    }
  },
  created() {
    this.resize();
  },
  mounted() {
    const that = this;
    window.onresize = that.resize;
  },
  methods: {
    resize: function() {
      var body = document.getElementsByTagName("body")[0];
      var html = document.getElementsByTagName("html")[0];
      var width = html.clientWidth;
      var height = html.clientHeight;
      var max = width > height ? width : height;
      var min = width > height ? height : width;
      body.style.width = max + "px";
      body.style.height = min + "px";
      console.log(max, min);
    }
  },
  components:{
    VueAudio
  },
};
</script>

<style lang="scss">
@media screen and (orientation: portrait) {
  /*竖屏样式*/
  body {
    transform-origin: 0 0;
    transform: rotateZ(90deg) translateY(-100%);
  }
}
@media screen and (max-width: 1920px) {
  .main {
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 1920px) {
  .main {
    margin: 0 auto;
    width: 19.2rem;
    height: 10.8rem;
  }
}
.main {
  background-color: #fff;
  /*background: url('../assets/images/new_safetybanner.jpg')no-repeat center center;*/
  /*background-size:100% 100%;*/
  overflow: hidden;
  position: relative;
  img {
    display: block;
    width: 100%;
    height: auto;
  }
}
.ivu-tooltip-rel {
  display: inline;
}
.ivu-slider-bar {
  color: #9dc7fe;
  height: 0.11rem;
}
.ivu-slider-wrap {
  height: 0.11rem;
  border-radius: 5px;
  // margin: 0.16rem 0;
}
.ivu-slider-button {
  width: 0.2rem;
  height: 0.2rem;
  border: 2px solid #ffffff;
}
.ivu-slider-button-wrap {
  width: 0.18rem;
  height: 0.18rem;
  top: -0.04rem;
}
#app {
  position: relative;
}
.audio {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%
}
</style>

